<script setup lang="ts">
import tableList from "@/components/tableList/tableList.vue";
import {reactive, ref, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {dataInfo, dataSubmit} from "@/api/result";
import {ElMessage, ElMessageBox} from "element-plus";
const router = useRouter()
const route = useRoute()
const examId = ref('')
const activeName = ref(0)
const submitLoad = ref(false)
const loading = ref(false);
const form = reactive({
  answer_id: '',
  score: ''
})
const formRef = ref('')
const formRules = {
  score: [{required: true, message: '请输入评分分数'}]
}
const tableData = reactive({
  data: [],
  writeData: {},
  student: {},
})
const tableHeader = reactive([
  {label: '题目', prop: 'content',align:'left'},
  {label: '答案', prop: 'correct_answer', width: '100px'},
  {label: '用户结果', prop: 'given_answer', width: '100px'},
])

const handleSubmit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      ElMessageBox.confirm('是否确认提交评分', '提示', {type: 'warning'}).then(async () => {
        submitLoad.value = true
        form.answer_id = tableData.writeData.answer_id
        let res = await dataSubmit(form);
        submitLoad.value = false
        if (res) {
          ElMessage({message: '提交成功', type: 'success'})
          await fetchData();
        }
      }).catch(() => {
      })
    }
  })

}

const fetchData = async () => {
  loading.value = true
  let res = await dataInfo({exam_id: examId.value})
  loading.value = false
  tableData.data = res.data.read
  tableData.writeData = res.data.write
  tableData.student = res.data.student
  form.score = res.data.write.score
  console.log(res);
}

const handleBack = () => {
  router.back()
}
onMounted(() => {
  examId.value = route.query.exam_id
  fetchData()
})
</script>

<template>
  <el-row justify="center" v-loading="loading">
        <el-col :span="18" :xs="24" class="white-shadow">
      <span style="display: flex;align-items: center;cursor: pointer;color: #303133" @click="handleBack">
         <Back style="width: 16px;margin-right: 3px"/>
        返回
      </span>
          <div class="examine-title">
            <span></span>
            考试信息
          </div>
          <el-descriptions size="large" border :column="5">
            <el-divider/>
            <el-descriptions-item label="姓名">{{ tableData.student.name }}</el-descriptions-item>
            <el-descriptions-item label="答题完成时间">{{ tableData.student.completed_at }}</el-descriptions-item>
            <el-descriptions-item label="总分数">
              <span style="font-size: 14px;color:#F56C6C;font-weight: bold ">{{ tableData.student.total_score }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
    <el-col :span="18" :xs="24" class="white-shadow">
      <div class="examine-title">
        <span></span>
        阅读理解
      </div>
      <el-collapse accordion v-model="activeName">
        <el-collapse-item :title="item.title" :name="index" v-for="(item,index) in tableData.data">
          <div class="examination-content" v-html="item.content"></div>

          <div style="padding: 0 80px">
            <tableList   :table-data="item.child" :table-header="tableHeader"></tableList>
          </div>

        </el-collapse-item>
      </el-collapse>
    </el-col>
    <el-col :span="18" :xs="24" class="white-shadow">
      <div class="examine-title examine-title1">
        <span></span>
        书面写作
      </div>
      <el-divider/>
      <div v-html="tableData.writeData.content">

      </div>
      <el-divider content-position="left" style="margin-top: 50px">学生提交写作</el-divider>
      <div class="content" v-html="tableData.writeData.given_answer">
      </div>
      <el-form inline :model="form" ref="formRef" :rules="formRules">
        <el-form-item label="写作评分" prop="score">
          <el-input v-model="form.score"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSubmit" :loading="submitLoad">提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped lang="less">
table {
  width: 100%;

  tr {
    border-bottom: 1px solid #ddd; /* 添加下边框 */
  }

  td {
    padding: 10px 50px 10px 0;
  }
}

.examine-title {
  font-size: 15px;
  font-weight: bold;
  margin: 20px 0 20px;
  display: flex;
  align-items: center;

  span {
    display: inline-block;
    width: 4px;
    height: 15px;
    margin-right: 6px;
    background-color: #409EFF;
  }
}

.examine-title1 {
  margin: 0 0 10px;
}

.examination-content {
  margin-bottom: 30px;
  font-size: 14px;
}

/deep/ .el-descriptions__cell {
  font-size: 14px !important;
}

.content {
  line-height: 30px;
  padding: 0 0 20px;
  color: #606266;
  font-size: 15px;
  word-wrap: break-word;
  word-break: normal;
  overflow-wrap: break-word;
}

.white-shadow {
  margin-bottom: 20px;
  padding: 30px;
}

.table-chilren {
  padding-left: 20px;
}

</style>